SideButton Marketing Website Interactive Demo — Knowledge Module Reference

What This Is

Interactive demo page that showcases SideButton capabilities with live, hands-on examples. Features a connection status dashboard (3 primary cards: Server, Browser Extension, SideButton Ready; 3 secondary cards: LLM Provider, Embed Buttons, Chat Panel; 1 account bar with help text), followed by 5 interactive demo sections, a step types reference with tabbed categories, and a bottom CTA. The TL;DR demo makes a real API call to the local SideButton server; all other demos are client-side only.

URL Patterns

Pattern	Description
/demo	Interactive demo page

Page Structure

+--[Header]----------------------------------+
|                                            |
| [Page Title + Subtitle]                    |
|  #demo-title / #demo-subtitle             |
|                                            |
| [Connection Status Dashboard]              |
|  Row 1: 3×primary cards (3-col grid)       |
|    Server | Browser Extension | Ready      |
|  Row 2: 3×secondary cards (3-col grid)     |
|    LLM Provider | Embed Buttons | Chat     |
|  Row 3: Account bar (full-width)           |
|  Help text (conditional)                   |
|                                            |
| [Demo 1: AI-Powered Summarization]  bg:slate-50 |
|   Left: description + step badges         |
|   Right: TL;DR card (textarea + button + result/error) |
|                                            |
| [Demo 2: Automate Any Form]  bg:white      |
|   Left: description                       |
|   Right: Live Form card (input + submit + result) |
|                                            |
| [Demo 3: One-Click Repeatable Actions]  bg:slate-50 |
|   Left: Click Counter card (button + count)|
|   Right: description                       |
|                                            |
| [Demo 4: Handle Dynamic UI]  bg:white      |
|   Left: description                       |
|   Right: Expandable Panel card (toggle + hidden panel) |
|                                            |
| [Demo 5: Detect Hidden Content]  bg:slate-50 |
|   Left: Hover card (target + tooltip)      |
|   Right: description                       |
|                                            |
| [Step Types: 5 category pills]             |
|   Browser(10) | Shell(2) | LLM(2) |       |
|   Data(2) | Control(6)                     |
|   Grid of step items per active tab        |
|                                            |
| [Bottom CTA]                               |
|   "Ready to Automate?"                     |
|   Primary: "Get Started Free" → docs       |
|   Secondary: "Browse Workflows" → /integrations |
+--[Footer]----------------------------------+

Key Elements

Element	Selector	Notes
Page title	#demo-title	H1: "See Workflows in Action"
Page subtitle	#demo-subtitle	Descriptive paragraph
Server status card	#status-card-server	Primary card; label shows Running/Not Running
Server status icon	#status-icon-server	Icon container; classes toggle checking/ok/fail/warn
Server status label	#status-label-server	Text: "Checking..." / "Running" / "Not Running"
Server help link	#status-link-server	Links to docs.sidebutton.com/installation; hidden when ok
Browser status card	#status-card-browser	Primary card; shows Connected/Installed/Not Detected
Browser status icon	#status-icon-browser	Icon container
Browser status label	#status-label-browser	Text: "Checking..." / "Connected" / "Installed" / "Not Detected" / "Not Connected"
Browser help link	#status-link-browser	Links to docs.sidebutton.com/extension; hidden when ok
Ready status card	#status-card-ready	Primary card; shows Ready/Not Ready
Ready status icon	#status-icon-ready	Icon container
Ready status label	#status-label-ready	Text: "Checking..." / "Ready" / "Not Ready"
Ready help link	#status-link-ready	Links to docs.sidebutton.com/first-workflow; hidden when ok
LLM status card	#status-card-llm	Secondary card; shows Ready/Not Available/Unknown
LLM status icon	#status-icon-llm	Small icon container
LLM status label	#status-label-llm	Text label
Embed status card	#status-card-embed	Secondary card; shows Enabled/Disabled/No Extension/Unknown
Embed status icon	#status-icon-embed	Small icon container
Embed status label	#status-label-embed	Text label
Chat status card	#status-card-chat	Secondary card; shows Enabled/Disabled/No Extension/Unknown
Chat status icon	#status-icon-chat	Small icon container
Chat status label	#status-label-chat	Text label
Account status bar	#status-card-account	Full-width bar; shows email / "Anonymous" / "Not Connected" / "Unknown"
Account status dot	#status-icon-account	8px colored dot
Account status label	#status-label-account	Text label
Status help text	#status-help	Hidden by default; shows install/start hints when server or extension missing
TL;DR textarea	#tldr-input	Pre-filled with ~550 char sample text about software development
TL;DR char count	#tldr-charcount	Updates on input; format "N characters"
TL;DR run button	#tldr-run	Text "TL;DR"; changes to "Running..." when active; disabled during run
TL;DR result container	#tldr-result	Hidden until workflow completes; fade-in animation
TL;DR result text	#tldr-result-text	Contains the AI-generated summary text
TL;DR error container	#tldr-error	Hidden; red background; shown on failure
TL;DR error text	#tldr-error-text	Error message string
Form input	#demo-input	Text input; placeholder "Type something here..."
Form submit button	#demo-submit	Text "Submit"
Form result	#demo-result	Shows typed text below input with fade-in animation
Counter button	#demo-counter	Text "Click me"; dark bg (slate-900)
Count display	#demo-count	Shows current count; starts at "0"; pop animation on change
Toggle button	#demo-toggle	Text "Toggle Panel"; primary bg
Toggle panel	#demo-panel	Hidden by default; contains description text; Escape key also closes
Hover target	#demo-hover-target	Underlined dotted text "Hover to reveal capabilities"
Tooltip	#demo-tooltip	Hidden by default; dark bg (#0F172A); text about 24 step types; positioned below target
Category pills	.step-category-pill	5 buttons: Browser, Shell, LLM, Data, Control; .active class on selected
Category pill (Browser)	.step-category-pill[data-category="browser"]	Active by default
Category pill (Shell)	.step-category-pill[data-category="shell"]
Category pill (LLM)	.step-category-pill[data-category="llm"]
Category pill (Data)	.step-category-pill[data-category="data"]
Category pill (Control)	.step-category-pill[data-category="control"]
Step category content	.step-category-content[data-category="..."]	Container for each tab's step items grid
Step items	.step-item	Grid items; each contains .step-badge + description text
Step badges	.step-badge	Monospace badge with step type name (e.g., "browser.click")
CTA primary link	a[href="https://docs.sidebutton.com/installation"]	"Get Started Free" in bottom CTA section
CTA secondary link	a[href="/integrations"]	"Browse Workflows" in bottom CTA section

Data Model

Field	Type	Description
tldr-input.value	string	Textarea content for TL;DR summarization; pre-filled with ~550 chars about software development
tldr-charcount.textContent	string	Character count display; format "{N} characters"; updates on every input event
tldr-run.disabled	boolean	Button disabled state; true while workflow is running
tldr-run.textContent	string	Button label; toggles between "TL;DR" and "Running..."
tldr-result-text.textContent	string	AI-generated summary returned from demo_tldr workflow; sourced from output_message or variables.summary
tldr-error-text.textContent	string	Error message on failure; contextual (timeout, HTTPS without extension, server not running)
demo-input.value	string	Text typed into form demo input field
demo-result.textContent	string	Mirror of demo-input.value after submit click
demo-count.textContent	string	Current counter value as string; parsed with parseInt; starts at "0"; increments by 1
demo-panel.classList	DOMTokenList	Contains "hidden" when panel is closed; toggled by button click or Escape key
demo-tooltip.classList	DOMTokenList	Contains "hidden" when not hovered; toggled by mouseenter/mouseleave events
status-label-{key}.textContent	string	Status text for each of 7 keys: server, browser, ready, llm, embed, chat, account
status-icon-{key}.classList	DOMTokenList	Icon state class: status-icon-checking, status-icon-ok, status-icon-fail, status-icon-warn
status-card-{key}.classList	DOMTokenList	Card state class: status-card-ok, status-card-fail, status-card-warn
status-help.textContent	string	Contextual help text; "Install the SideButton browser extension..." or "Start the server with: npx @sidebutton/server serve"
data-sidebutton attribute	string	Set on document.documentElement by Chrome extension; value "ready" when extension present
API endpoint	string	TL;DR calls http://localhost:9876/api/workflows/demo_tldr/run?sync=true via POST with { params: { text } }
API response	object	{ output_message: string, variables: { summary: string } } — summary extracted from either field
Health endpoint	string	Status cards poll http://localhost:9876/health every 5s; returns { browser_connected, desktop_connected }
Extension status	object	Retrieved via SIDEBUTTON_GET_STATUS postMessage; fields: mode, email, embedEnabled, chatEnabled, connected, wsConnected, hostedConnected
Extension fetch proxy	object	SIDEBUTTON_FETCH / SIDEBUTTON_FETCH_RESPONSE postMessage pair; bypasses Private Network Access restrictions on HTTPS
Step types data	static	Hardcoded in HTML: Browser (10), Shell (2), LLM (2), Data (2), Control (6) = 22 total step types
Active category	string	Tracked via .active class on .step-category-pill; default "browser"; set by data-category attribute

States & Variations

State	Trigger	Visual Indicator
Checking	Page load (500ms delay) / 5s polling interval	Pulsing amber icons on all status cards; labels show "Checking..."
Connected (full)	Server running + WS connected + tab attached via CDP	All 3 primary cards green; "Running" / "Connected" / "Ready"
Disconnected	Server not running	Server + Ready cards red; "Not Running" / "Not Ready"
Partial (extension only)	Extension installed but server not running	Browser card amber "Installed"; Server + Ready cards red
Partial (no tab)	Server running + extension installed but no CDP tab	Server green; Browser amber "Installed"; Ready red
Hosted mode	Extension in hosted mode with cloud connection + tab	Ready shows "Ready" via hosted path
No extension (HTTPS)	On HTTPS without extension installed	Browser card red "Not Detected"; help text shows extension install message
No extension (HTTP)	On HTTP without extension installed	Browser card red "Not Connected"; direct fetch used instead
LLM ready	Server running + desktop_connected is true	LLM card green "Ready"
LLM unavailable	Server running + desktop_connected is false	LLM card red "Not Available"
LLM unknown	Server not running	LLM card red "Unknown"
Embed enabled	Extension reports embedEnabled true	Embed card green "Enabled"
Embed disabled	Extension reports embedEnabled false	Embed card amber "Disabled"
Chat enabled	Extension reports chatEnabled true	Chat card green "Enabled"
Chat disabled	Extension reports chatEnabled false	Chat card amber "Disabled"
Account logged in	Extension reports email string	Account bar green with email address
Account anonymous	Local mode or extension + server but no email	Account bar green "Anonymous"
Account disconnected	Extension present but not connected	Account bar red "Not Connected"
Help text visible	Server not running or extension not installed	#status-help shown with contextual message
Help text hidden	Server running	#status-help has class "hidden"
Doc link visible	Primary card in fail/warn state	#status-link-{key} has class "visible"
Doc link hidden	Primary card in ok state	#status-link-{key} lacks "visible" class
TL;DR idle	Default / after completion	Button shows "TL;DR", enabled
TL;DR running	Click "TL;DR" with non-empty text	Button disabled, text "Running..."; result + error both hidden
TL;DR success	Workflow completes successfully	#tldr-result visible with fade-in animation; summary text in #tldr-result-text
TL;DR error (timeout)	AbortController fires at 30s	Error panel: "Request timed out. The LLM may be slow -- try again."
TL;DR error (HTTPS)	On HTTPS without extension	Error panel: "Install the SideButton browser extension to run this demo on HTTPS."
TL;DR error (no server)	Server unreachable	Error panel: "Could not reach the SideButton server. Start it with: npx @sidebutton/server serve"
TL;DR empty input	Click "TL;DR" with empty/whitespace text	Nothing happens (early return)
Form submitted	Click submit	Typed text appears in #demo-result with fade-in animation
Form empty submit	Click submit with empty input	Empty string shown in #demo-result
Counter incremented	Click counter button	#demo-count increments by 1; pop animation (scale 1 -> 1.3 -> 1)
Panel open	Click toggle button	#demo-panel loses "hidden" class; content slides into view
Panel closed (button)	Click toggle button again	#demo-panel gets "hidden" class
Panel closed (Escape)	Press Escape key while panel open	#demo-panel gets "hidden" class
Tooltip visible	Mouseenter on #demo-hover-target	#demo-tooltip loses "hidden" class; fade-in animation (0.15s)
Tooltip hidden	Mouseleave from #demo-hover-target	#demo-tooltip gets "hidden" class
Step tab active	Click category pill	Pill gets .active class (white bg, border); corresponding .step-category-content visible; others hidden
Button press	:active on any .demo-btn-press	CSS transform scale(0.95) for 0.1s

Common Tasks

1. Run TL;DR Summarization Demo

1. Scroll to "AI-Powered Summarization" section
2. Optionally replace pre-filled text in #tldr-input textarea
3. Verify #tldr-charcount updates on edit
4. Click #tldr-run button ("TL;DR")
5. Wait for button text to change to "Running..."
6. Wait for either #tldr-result (success) or #tldr-error (failure) to become visible
7. If success: verify #tldr-result-text contains summarized text
8. Note: requires SideButton server running on localhost:9876 with LLM provider configured

2. Run Form Automation Demo

1. Scroll to "Automate Any Form" section
2. Click #demo-input text field
3. Type text into the field
4. Click #demo-submit button
5. Verify typed text appears in #demo-result with fade-in animation
6. Note: purely client-side, no server needed

3. Run Counter Demo

1. Scroll to "One-Click Repeatable Actions" section
2. Read current count from #demo-count (starts at "0")
3. Click #demo-counter button
4. Verify #demo-count increments by 1
5. Observe pop animation on the count number (scale 1 -> 1.3 -> 1 over 0.25s)
6. Note: counter resets on page reload

4. Run Toggle Panel Demo

1. Scroll to "Handle Dynamic UI" section
2. Verify #demo-panel is hidden (has class "hidden")
3. Click #demo-toggle button
4. Verify #demo-panel becomes visible (loses "hidden" class)
5. Verify panel contains descriptive text about workflow capabilities
6. Close panel by either: click #demo-toggle again OR press Escape key
7. Verify #demo-panel is hidden again

5. Run Hover Tooltip Demo

1. Scroll to "Detect Hidden Content" section
2. Verify #demo-tooltip is hidden
3. Hover over #demo-hover-target (underlined dotted text: "Hover to reveal capabilities")
4. Verify #demo-tooltip appears below the target text with fade-in animation (0.15s)
5. Verify tooltip text: "SideButton runs 24 step types: browser, shell, LLM, data, and control flow."
6. Move mouse away from target
7. Verify #demo-tooltip disappears (gets "hidden" class)

6. Browse Step Types Reference

1. Scroll to "22 Step Types, Infinite Possibilities" section
2. Default tab: "Browser" showing 10 step types in a 2-column grid
3. Click a different category pill to switch: Shell (2), LLM (2), Data (2), Control (6)
4. Verify .active class moves to clicked pill; previous tab content hidden
5. Each step type shows: monospace badge (e.g., browser.click) + short description
6. Note: pills act as exclusive tabs, not cumulative filters

7. Check Connection Status

1. Observe connection status dashboard at top of page (auto-checks 500ms after load)
2. Read 3 primary cards: Server, Browser Extension, SideButton Ready
3. Read 3 secondary cards: LLM Provider, Embed Buttons, Chat Panel
4. Read account status bar (email, "Anonymous", or error state)
5. If not OK: check for help text in #status-help and doc links on primary cards
6. Status auto-refreshes every 5 seconds via polling

Tips

• TL;DR demo requires SideButton server running locally AND an LLM provider configured (desktop_connected) -- status cards show both states
• TL;DR on HTTPS requires the Chrome extension installed to proxy requests via SIDEBUTTON_FETCH postMessage (bypasses Private Network Access)
• Counter persists during page session but resets on reload; count is parsed from DOM text on each click
• Toggle panel responds to both button click (toggle) and Escape keyboard shortcut (close only)
• Status cards poll every 5 seconds with a 500ms initial delay to let the extension content script set data-sidebutton="ready"
• Category pills in Step Types section work as exclusive tab switchers -- only one category grid is visible at a time
• Form demo and counter demo are purely client-side -- no server connection needed to test them
• Pre-filled TL;DR text can be replaced with any content; the char count updates live as you type
• All interactive buttons use .demo-btn-press class for a subtle scale(0.95) press animation on click

Gotchas

• TL;DR requires server: The TL;DR demo calls localhost:9876/api/workflows/demo_tldr/run?sync=true via POST -- fails with contextual error panel if server not running, and the error message differs depending on HTTPS vs HTTP and whether the extension is installed
• HTTPS Private Network Access: On HTTPS (production), direct fetch() to localhost:9876 is blocked by browser security; the extension fetch proxy is required -- without it, TL;DR silently fails and shows "Install the SideButton browser extension to run this demo on HTTPS"
• Tooltip requires real hover: #demo-tooltip only appears on mouseenter event -- programmatic hover via dispatchEvent may not trigger it in all automation tools; use SideButton's browser.hover step for reliable triggering
• Toggle panel has no animation transition: Despite the skill section name "slides in", the panel uses classList.toggle('hidden') which is instant show/hide -- there is no CSS slide transition; it appears/disappears immediately
• Status card polling creates race conditions: Cards update asynchronously every 5s -- taking a snapshot immediately after page load may show "Checking..." instead of actual status; wait at least 1-2 seconds after load for the first check to complete
• Counter animation vs state: Pop animation on #demo-count is CSS-only (0.25s) via class toggle with offsetWidth reflow trick -- the numeric count updates instantly, but the animation class is re-applied each click; no state change to wait for
• Step types tabs replace content: Only one category is visible at a time -- switching tabs hides the previous .step-category-content and shows the new one; take a fresh snapshot after clicking a pill to see the new grid items
• TL;DR 30s timeout: The fetch has a 30-second timeout (via AbortController for direct fetch, or via the extension proxy timeout parameter) -- slow LLM providers may hit this limit